# HTML Links

« Previous
Next Chapter »

Links are found in nearly all web pages. Links allow users to click their way from page to page.

## HTML Links - Hyperlinks

HTML links are hyperlinks.

A hyperlink is an element, a text, or an image that you can click on, and jump to another document.

## HTML Links - Syntax

In HTML, links are defined with the <a> tag:

## Link Syntax:

<a href="url">link text</a>

## Example:

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
Try it Yourself »

The href attribute specifies the destination address (http://www.w3schools.com/html/)

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text, will send you to the specified address.

| The link text does not have to be text. It can be an HTML image or any other HTML element.

## Local Links

The example above used an absolute URL (A full web address).

A local link (link to the same web site) is specified with a relative URL (without http://www....).

## Example:

<a href="html_images.asp">HTML Images</a>
Try it Yourself »

## HTML Links - Colors and Icons

When you move the mouse cursor over a link, two things will normally happen:

- The mouse arrow will turn into a little hand
- The color of the link element will change

By default, links will appear as this in all browsers:

- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red

You can change the defaults, using styles:

## Example

<style>
a:link {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>
Try it Yourself »

## HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

This example will open the linked document in a new browser window or in a new tab:

## Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Try it Yourself »

Target Value | Description
--- | ---
_blank | Opens the linked document in a new window or tab
_self | Opens the linked document in the same frame as it was clicked (this is default)
_parent | Opens the linked document in the parent frame
_top | Opens the linked document in the full body of the window
framename | Opens the linked document in a named frame

If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

## Example

<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Try it Yourself »

## HTML Links - Image as Link

It is common to use images as links:

## Example

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Try it Yourself »

| border:0 is added to prevent IE9 (and earlier) from displaying a border around the image.

## HTML Links - The id Attribute

The id attribute can be used to create bookmarks inside HTML documents.

Bookmarks are not displayed in any special way. They are invisible to the reader.

## Example

Add an id attribute to any <a> element:

<a id="tips">Useful Tips Section</a>

Then create a link to the <a> element (Useful Tips Section):

<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the <a> element (Useful Tips Section) from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a>
Try it Yourself »

| Without a trailing slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a slash to the address, and then create a new request.

## Chapter Summary

- Use the HTML <a> element to define a link
- Use the HTML href attribute to define the link address
- Use the HTML target attribute to define where to open the linked document
- Use the HTML <img> element (inside <a>) to use an image as a link
- Use the HTML id attribute (id=value) to define bookmarks in a page
- Use the HTML href attribute (href="#value") to address the bookmark

## Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »

## HTML Link Tags

Tag | Description
--- | ---
<a> | Defines a hyperlink

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples